<template>
  <el-container class="user" :style="{ height: height }">
    <el-popover
      trigger="click"
      placement="bottom"
    >
      <template #reference>
        <el-row class="user-wrapper">
          <el-avatar
            class="avatar"
            :src="avatar">
            <avatar />
          </el-avatar>
          <div class="info">
            <el-col class="info-name" :span="24">{{ userInfo.nikeName || 'todo' }}</el-col>
            <el-col class="info-email" :span="24">{{ userInfo.email }}</el-col>
          </div>
        </el-row>
      </template>

      <ul class="user-operation-list has-hover-style">
        <li @click="toUser">编辑个人信息</li>
        <li @click="logout">退出登录</li>
      </ul>
    </el-popover>
  </el-container>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useStore, mapGetters } from 'vuex'
import { GETUSERINFO } from '@/store/modules/user/types'
import Cookie from '@/utils/cookie'
import avatar from '@/assets/images/avatar.jpg'
import { TODOAUTH } from '@/config/constant'
import { useRouter } from 'vue-router'

const { height = '60px' } = defineProps<{
  height: String
}>()

const router = useRouter()
const store = useStore()
const storeGetters = mapGetters([GETUSERINFO])
const userInfo = computed(storeGetters[GETUSERINFO].bind({ $store: store }))

const logout = () => {
  Cookie.set(TODOAUTH, '')
  router.push('/login')
}
const toUser = () => {
  router.push('/user')
}
</script>

<style lang="scss" scoped>
@mixin ul-style() {
  padding: 0;
  list-style: none;
  &.has-hover-style {
    li {
      cursor: pointer;
      @include transition('background-color', $default-transition-duration);
      &:hover {
        background-color: $hover-color;
        &::after { opacity: 0; }
      }
    }
  }
  li {
    position: relative;
    border-radius: $border-radius;
    padding: 10px 10px;

    &::after {
      content: '';
      border-top: 1px solid $border-color;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      bottom: 0;
      display: block;
      opacity: 1;
      @include transition('opacity', $default-transition-duration);
    }

    ::v-deep(.el-icon) {
      margin-right: 5px;
      margin-top: 1px;
    }
    &:last-of-type {
      &::after { display: none; }
    }

    .label {
      white-space: nowrap;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-right: 5px;
    }
  }
}

.user {
  cursor: pointer;
  transition: all .25s;
  border-radius: $border-radius;
  padding-top: 10px;
  padding-bottom: 10px;

  &:hover {
    margin-left: -5px;
    margin-right: -5px;
    padding-left: 5px;
    padding-right: 5px;
    background: $hover-color;
  }

  .user-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .avatar {
      flex-grow: 0;
      height: 60px;
      width: 60px;
      padding: 0;
    }

    .info {
      text-align: left;
      padding-left: 15px;
      flex-grow: 1;
      &-name {
        flex-grow: 1;
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        padding-bottom: 2px;
      }
      &-email {
        flex-grow: 1;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        padding-top: 2px;
      }
    }
  }
}

.user-operation-list {
  @include ul-style()
}
</style>
